<template>
  <div>
    <Top title="帮助中心" iconShow="1"></Top>
  
    <!-- </div> -->
  
    <div class="helpcenter" v-for="(item,index) in helpList" :key="index">
      <div class="helpcenter-top">
        <p>&nbsp;{{item.channel}}</p>
      </div>
      <div v-for="(itemS,idx) in item.contentList" :key="idx" class="helpcenter-content">
        <Fold :title="itemS.title">
          <div class="charpter">{{itemS.detail}}</div>
        </Fold>
      </div>
    </div>
  
  </div>
</template>
<script>
import Top from '../components/Header'
import Fold from '../components/Fold'
import { Indicator,MessageBox } from 'mint-ui'
export default {
  name: 'login',
  data() {
    return {
      helpList: []
    }
  },
  methods: {
    /* 
      @params
      @function 折叠面板逻辑
    */
  },
  components: { Top, Fold },
  mounted() {
    document.setTitle('帮助中心');
    let that = this;
    Indicator.open('加载中...')
    this.$http.post('/loansupermarket-app/index/getHelpCenter.do')
      .then((response) => {
        setTimeout(function () {
          Indicator.close();
        }, 500)

        var resBody = response.body;
        if (resBody.code == '000') {
          that.helpList = resBody.result;
          // console.log(that.helpList)
        }else{
          MessageBox.alert(resBody.mesg);
        }
      })
  }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.helpcenter {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  width: 92%;
  margin: 0.4rem auto;
  background: #fff;
  &-top {
    width: 100%;
    font-size: 0.4rem;
    height: 1.16rem;
    text-align: left;
    line-height: 0.4rem;
    padding-top: 0.1rem;
    p {
      margin-left: 0.4rem;
      height: 0.4rem;
      border-left: 2px solid $primaryColor;
    }
  }
  &-content {
    font-size: 0.33rem;
    border-top: 1px solid $borderColor;
    text-align: left;
    line-height: 1.33rem;
    .title {
      box-sizing: border-box;
      padding: 0 0.2rem;
      .iconfont {
        float: right;
      }
      .rotate {
        transform: rotate(90deg);
      }
    }
    .charpter {
      line-height: 0.6rem;
      padding: 0.4rem 0.4rem;
      background: $bgColor;
    }
  }
}

.helpcenter:nth-of-type(2) {
  margin-top: 1.6rem;
}
</style>
